<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		html{
			font-size: 50px;
		}
		/* @media 媒体类型  and （媒体特性） {
			
		} */
		@media screen and (min-width:280px){
			 html{
				 font-size: 18.66px;
			 }
		}
		@media screen and (min-width:320px){
			 html{
				 font-size: 21.33px;
				 background-color: red;
			 }
		}
		@media screen and (min-width:400px){
			 html{
				 font-size: 26.66px;
				 background-color: aqua;
			 }
		}
		@media screen and (min-width:520px){
			 html{
				 font-size: 34.66px;
				 background-color: blue;
			 }
		}
		@media screen and (min-width:600px){
			 html{
				 font-size: 40px;
				 background-color: brown;
			 }
		}
		@media screen and (min-width:750px){
			 html{
				font-size: 50px;
				 background-color: #ffb330;
			 }
		}
		
	</style>
</head>
<body>
	屏幕尺寸大于750      红色
	大于600小于750       橙色
	大于500    600       黄色
	<!-- 最小     280  -->    
	大于   280         蓝色
</body>
</html>